<template lang="pug">
  .filter-group-wrap
    el-checkbox.check-all(
      v-model="checkAll"
      :label="label"
      :indeterminate="indeterminate"
      @change="handleCheckAllChange")
    el-checkbox-group.checkbox-group(
      v-model="checkList"
      @change="handleCheckedItemChange")
      el-checkbox.filter-group-checkbox(
        v-for="(item, index) in options"
        :key="index"
        :label="item.value") {{item.label}}
</template>

<script>
/*
 * @name filter-group 地图定位点选项卡的子项组件
 * @author caixq <caixq@gddxit.com>
 * @description 通过不同的列表渲染不同的子选项卡
 */
export default {
  props: {
    label: String,
    value: {
      type: Array,
      default: () => ([])
    },
    options: {
      type: Array,
      default: () => ([])
    }
  },
  data () {
    return {
      checkAll: this.value.length === this.options.length,
      indeterminate: this.value.length > 0 && this.value.length < this.options.length
    }
  },
  computed: {
    allValues () {
      return this.options.map(({ value }) => value)
    },
    checkList: {
      get () {
        return this.value
      },
      set (val) {
        this.$emit('input', val)
      }
    }
  },
  methods: {
    handleCheckAllChange (val) {
      this.$set(this, 'checkList', val ? this.allValues : [])
      this.indeterminate = false
    },
    handleCheckedItemChange (value) {
      let checkedCount = value.length
      this.checkAll = checkedCount === this.options.length
      this.indeterminate = checkedCount > 0 && checkedCount < this.options.length
    }
  }

}
</script>

<style lang="sass" scoped>
.check-all
  font-size: 14px
  font-weight: bolder
  color: #222
  margin: 0
.checkbox-group
  line-height: 0
  .filter-group-checkbox
    margin: 0
    display: inline-block
    width: 120px
    margin-right: 12px
    font-weight: normal
</style>
